<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import type { FormType } from './subjectDetail'
import { GetSubjectDetail, PostCreateSubject, PutModifySubject } from '@/api/modules/subject'
import detailStore from '@/store/modules/cacheData'

const router = useRouter()
const route = useRoute()
const detailData = detailStore()

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<FormType>({
  subjectName: '',
  banners: [],
  shareTxt: '',
  shareImg: '',
  sort: 0,
  enable: true,
  desp: '',
})

const id = route.query.id as string

// 提交
async function SubmitData() {
  const params = { ...ruleForm.value }
  params.banners = (params.banners as string[]).join(',')
  if (id) {
    // 编辑
    params.id = id
    PutModifySubject(params).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('编辑成功')
        router.push({ name: 'subjectIndex' })
      }
    })
  }
  else {
    // 添加
    PostCreateSubject(params).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('添加成功')
        detailData.EmptySubject()
        router.push({ name: 'subjectIndex' })
      }
    })
  }
}

// 图片上传赋值
function handleUploadSuccess(url: string, key: string) {
  // eslint-disable-next-line ts/ban-ts-comment
  // @ts-expect-error
  ruleForm.value[key] = url
}

watch(ruleForm, (newValue) => {
  if (!id) {
    detailData.RememberSubject(newValue)
  }
}, { deep: true })

onMounted(async () => {
  if (id) {
    await GetSubjectDetail(id).then((res: any) => {
      if (res.statusCode === 200) {
        ruleForm.value = res.data
        ruleForm.value.banners = (res.data.banners as string).split(',')
      }
    })
  }
  else {
    ruleForm.value = detailData.GetSubject()
  }
})
</script>

<template>
  <div>
    <PageHeader :title="id ? '编辑' : '添加'" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :model="ruleForm">
      <PageMain title="基础信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="专题名称">
              <el-input v-model="ruleForm.subjectName" style="width: 300px;" placeholder="请输入专题名称" />
            </ElFormItem>
          </ElCol>
          <!-- <ElCol :md="8">
            <ElFormItem label="排序">
              <el-input v-model="ruleForm.sort" type="number" style="width: 200px;" placeholder="请输入排序" />
            </ElFormItem>
          </ElCol> -->
          <ElCol :md="8">
            <ElFormItem label="是否可用">
              <el-switch
                v-model="ruleForm.enable"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="分享语">
              <el-input v-model="ruleForm.shareTxt" type="textarea" style="width: 500px;" placeholder="请输入分享语" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="描述">
              <el-input v-model="ruleForm.desp" type="textarea" style="width: 500px;" placeholder="请输入描述" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="上传图片">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="分享图">
              <ImageUpload
                width="auto" height="200" :size="5" :url="ruleForm.shareImg" :ext="['jpg', 'png']"
                @on-success="(imgUrl: string) => handleUploadSuccess(imgUrl, 'shareImg')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="Banner">
              <ImagesUpload
                :size="5" :url="(ruleForm.banners as string[])" :ext="['jpg', 'png']" :max="10"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 80px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData()">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style lang="scss" scoped>
.box {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}

.card-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
</style>
